<script setup lang="ts">
import type { CSSProperties } from 'vue'

/**
 * @description 表单或列表中的 Cell 的容器，由一个 label 和一个插槽组成。
 * 在 Section 中使用，ListCell 不显示背景颜色，背景颜色由 Section 显示。
 *
 * @property label - Cell 的 label
 * @property direction - Cell 的内容的排布方向，默认为 row
 */
const props = withDefaults(defineProps<{
  label: string
  direction?: 'row' | 'column'
}>(), {
  label: '标签',
  direction: 'row',
})

const containerStyle = computed(() => {
  if (props.direction === 'row') {
    return {
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center',
      padding: '0rpx 30rpx',
      width: '100%',
    } as CSSProperties
  }
  else {
    return {
      display: 'flex',
      flexDirection: 'column',
      padding: '44rpx 30rpx',
      width: '100%',
    } as CSSProperties
  }
})
</script>

<template>
  <view :style="containerStyle">
    <view class="flex-shrink-0 text-28rpx leading-28rpx text-secondary">
      {{ label }}
    </view>
    <Spacer v-if="props.direction === 'column'" height="27" />
    <Spacer v-if="props.direction === 'row'" class="flex-shrink-0" width="32" />
    <slot />
  </view>
</template>
